<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加生长记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <div class="nav-header">
            <div class="nav-action text-gray-500">
                <i class="fas fa-chevron-left"></i> 返回
            </div>
            <div class="nav-title">添加生长记录</div>
            <div class="nav-action">保存</div>
        </div>
        
        <!-- 表单 -->
        <div class="card">
            <div class="input-group">
                <div class="input-label">测量日期</div>
                <input type="date" class="input-field" value="2024-06-05">
            </div>
            
            <div class="input-group">
                <div class="input-label">身高 (cm)</div>
                <div class="relative">
                    <input type="number" step="0.1" class="input-field pr-12" placeholder="例如：76.0">
                    <span class="absolute right-4 top-0 bottom-0 flex items-center text-gray-500">cm</span>
                </div>
                <div class="mt-2 text-xs text-gray-500">上次记录：75.5 cm (2024年5月25日)</div>
            </div>
            
            <div class="input-group">
                <div class="input-label">体重 (kg)</div>
                <div class="relative">
                    <input type="number" step="0.1" class="input-field pr-12" placeholder="例如：9.5">
                    <span class="absolute right-4 top-0 bottom-0 flex items-center text-gray-500">kg</span>
                </div>
                <div class="mt-2 text-xs text-gray-500">上次记录：9.2 kg (2024年5月25日)</div>
            </div>
            
            <div class="input-group">
                <div class="input-label">头围 (cm) (可选)</div>
                <div class="relative">
                    <input type="number" step="0.1" class="input-field pr-12" placeholder="例如：46.0">
                    <span class="absolute right-4 top-0 bottom-0 flex items-center text-gray-500">cm</span>
                </div>
                <div class="mt-2 text-xs text-gray-500">上次记录：45.5 cm (2024年5月25日)</div>
            </div>
            
            <div class="input-group">
                <div class="input-label">测量地点 (可选)</div>
                <select class="input-field">
                    <option>家中</option>
                    <option>医院</option>
                    <option>社区医疗中心</option>
                    <option>幼儿园</option>
                    <option>其他</option>
                </select>
            </div>
            
            <div class="input-group">
                <div class="input-label">备注 (可选)</div>
                <textarea class="input-field h-20 py-2" placeholder="添加一些备注..."></textarea>
            </div>
        </div>
        
        <!-- 照片记录部分 -->
        <h2 class="section-header mt-6">添加照片 (可选)</h2>
        <div class="card">
            <div class="grid grid-cols-4 gap-2">
                <div class="aspect-square bg-gray-100 rounded-lg flex flex-col items-center justify-center">
                    <i class="fas fa-camera text-gray-400 text-xl mb-1"></i>
                    <div class="text-xs text-gray-500">添加</div>
                </div>
            </div>
            <div class="mt-2 text-xs text-gray-500">
                添加照片可以更好地记录宝宝生长变化
            </div>
        </div>
        
        <div class="mt-6">
            <button class="btn-primary">保存记录</button>
        </div>
        
        <div class="mt-4">
            <button class="btn-secondary">取消</button>
        </div>
    </div>
</body>
</html> 